import React, { useState, useEffect } from 'react';

import styles from './index.less';

import { Descriptions } from 'antd';

const img = require('@/assets/img/1.jpg');

export default function Picture(props) {
  let { routes, location } = props;
  const [state, setState] = useState(0);
  const imgList = [1, 2, 3, 4, 5];
  const calculationList = () => {
    const number = Math.floor(Math.random() * 60 + 10);
    const numberList = [];
    for (let item = 10; item <= number + 10; item++) {
      numberList.push(item);
    }
    return numberList;
  };

  return (
    <>
      <div className={styles.wrap}>
        <div className={styles.img_wrap}>
          <div className={styles.img_wrap_container}>
            {calculationList().map((item) => {
              const r = Math.floor(Math.random() * 256);
              const g = Math.floor(Math.random() * 256);
              const b = Math.floor(Math.random() * 256);
              const a = Math.floor(Math.random() * 7 + 1) / 10;
              return (
                <div
                  key={item}
                  style={{ background: `rgba(${r},${g},${b},${a})` }}
                  className={styles.color_wrap}
                ></div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
}
